<template>
  <div>
    <el-row>
      <el-col style="margin-top: 30px; position: relative" :span="6">
        <el-form label-position="right">
          <el-form-item label="门诊名称:" label-width="120px">
            <el-input v-model="VCTname"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col style="margin-top: 30px" :span="6" :offset="2">
        <el-button style="width: 20%" type="primary" @click="GetList"
          >查询</el-button
        >
        <el-button style="width: 20%" type="primary" @click="Add"
          >新增</el-button
        >
      </el-col>
      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
          v-if="Data != null"
        >
          <el-table-column
            prop="id"
            label="ID"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="门诊名称"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="phone"
            label="联系电话"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="workingtime"
            label="工作时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="门诊地址"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click="Edit(scope.row)"
                >修改</el-button
              >
              <el-button
                link
                type="primary"
                size="small"
                @click="Delete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :title="title"
      v-model="dialogFormVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="门诊名称:" label-width="100px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="所属区县:" label-width="100px">
          <el-input v-model="form.county"></el-input>
        </el-form-item>
        <el-form-item label="门诊地址:" label-width="100px">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" label-width="100px">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="工作时间:" label-width="100px">
          <el-input v-model="form.workingtime"></el-input>
        </el-form-item>
        <el-form-item label="经度:" label-width="100px">
          <el-input v-model="form.longitude"></el-input>
        </el-form-item>
        <el-form-item label="纬度:" label-width="100px">
          <el-input v-model="form.latitude"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer" style="margin-top: 10px">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit_add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRaw, onMounted, onBeforeMount } from "vue";
import apiService from "@/services/apiService";
import { conversionUtcDate, base64ToExcelAndDownload } from "@/utils/auth";
import { v4 as uuidv4 } from "uuid";
import { ElMessageBox, ElMessage } from "element-plus";
import { store } from "@/store";

defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Menzhen"
});

//表格数据
const Data = ref<any>([]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(10); // 每页条数
const Total = ref<number>(1); //总条数
const VCTname = ref("");
const dialogFormVisible = ref(false);
const title = ref("新增VCT门诊");

const GetList = () => {
  const params = {
    msgid: "PagingFindVTCOutpatientWeb",
    token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
    seq: uuidv4(),
    body: {
      pageno: currentPage.value,
      pagesize: pageSize.value,
      name: VCTname.value,
      type: 1
    }
  };

  apiService
    .post("", params)
    .then((res: any) => {
      console.log(res.data);
      Data.value = res.data.body.outpatients;
      Total.value = res.data.body.total;
    })
    .catch(error => {
      console.error("Error fetching data:", error);
    });
};
const form = reactive({
  outpatientid: "",
  name: "",
  county: "",
  address: "",
  phone: "",
  workingtime: "",
  descr: "",
  longitude: "",
  latitude: ""
});
const Add = () => {
  form.name = "";
  form.address = "";
  form.county = "";
  form.latitude = "";
  form.longitude = "";
  form.phone = "";
  form.workingtime = "";
  dialogFormVisible.value = true;
  title.value = "新增VCT门诊";
};
const submit_add = () => {
  if (title.value == "新增VCT门诊") {
    const params = {
      msgid: "AddVTCOutpatient",
      token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
      seq: uuidv4(),
      body: form
    };

    apiService
      .post("", params)
      .then((res: any) => {
        console.log(res.data);
        if (res.data.code == 200) {
          dialogFormVisible.value = false;
          ElMessage({
            type: "success",
            message: res.data.body.message
          });
          GetList();
        }
      })
      .catch(error => {
        console.error("Error fetching data:", error);
      });
  } else {
    const params = {
      msgid: "UpdateVTCOutpatient",
      token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
      seq: uuidv4(),
      body: {
        outpatientid: form.outpatientid,
        name: form.name,
        county: form.county,
        address: form.address,
        phone: form.phone,
        workingtime: form.workingtime,
        descr: "",
        longitude: form.longitude,
        latitude: form.latitude
      }
    };

    apiService
      .post("", params)
      .then((res: any) => {
        console.log(res);
        if (res.data.code == 200) {
          dialogFormVisible.value = false;
          ElMessage({
            type: "success",
            message: "修改成功"
          });
          GetList();
        }
      })
      .catch(error => {
        console.error("Error fetching data:", error);
      });
  }
};
const Edit = row => {
  dialogFormVisible.value = true;
  title.value = "修改VCT门诊";
  form.outpatientid = row.id;
  form.name = row.name;
  form.address = row.address;
  form.county = row.county;
  form.latitude = row.latitude;
  form.longitude = row.longitude;
  form.phone = row.phone;
  form.workingtime = row.workingtime;
};
const Delete = row => {
  ElMessageBox.confirm("确认删除?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      const params = {
        msgid: "DeleteVTCOutpatient",
        token: "BC65FD34-931E-6E6D-7979-EFD67A547B56",
        seq: uuidv4(),
        body: {
          outpatientid: row.id
        }
      };
      apiService.post("", params).then((res: any) => {
        console.log(res);
        if (res.data.code == 200) {
          ElMessage({
            type: "success",
            message: "删除成功"
          });
          GetList();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
  GetList();
};

const handleClose = (done: () => void) => {
  form.name = "";
  form.address = "";
  form.county = "";
  form.latitude = "";
  form.longitude = "";
  form.phone = "";
  form.workingtime = "";
  done();
};
onBeforeMount(() => {
  // GetList();
});
onMounted(() => {
  GetList();
});
</script>

<style lang="scss" scoped>
.active-button {
  background-color: #409eff; /* 设置按钮激活时的背景颜色 */
  color: white; /* 设置按钮激活时的文字颜色 */
}
</style>
